<template>
	<view class="container">
		<view class="register-form">
			<view class="form-item">
				<text class="label">用户名：</text>
				<input class="input" placeholder="请输入用户名" v-model="registerForm.username" />
			</view>
			<view class="form-item">
				<text class="label">密码：</text>
				<input class="input" type="password" placeholder="请输入密码" v-model="registerForm.password" />
			</view>
			<view class="form-item">
				<text class="label">确认密码：</text>
				<input class="input" type="password" placeholder="请再次输入密码" v-model="registerForm.confirmPassword" />
			</view>
			<view class="form-item">
				<text class="label">手机号：</text>
				<input class="input" type="password" placeholder="请输入手机号" v-model="registerForm.mobile" />
			</view>
			<view class="form-item">
				<text class="label">邮箱：</text>
				<input class="input" type="password" placeholder="请输入邮箱" v-model="registerForm.email" />
			</view>
			<button class="register-btn" @click="handleRegister">
				注册
			</button>
			<view class="login-link">
				<text class="link-text" @click="goToLogin">已有账号？去登录</text>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		reactive
	} from 'vue';

	// 注册表单数据
	const registerForm = reactive({
		nickname: "用户"+new Date().getTime(), //默认昵称为用户+当前精确日期时间（精确到毫秒）
		username: '',
		password: '',
		confirmPassword: '',
		mobile: '',
		email: '',
		sex:1, //默认性别为男
	});

	// 注册逻辑
	const handleRegister = () => {
		// 验证用户名是否为空
		if (!registerForm.username) {
			uni.showToast({
				title: '请输入用户名',
				icon: 'none',
			});
			return;
		}

		// 验证密码是否为空
		if (!registerForm.password) {
			uni.showToast({
				title: '请输入密码',
				icon: 'none',
			});
			return;
		}

		// 验证确认密码是否为空
		if (!registerForm.confirmPassword) {
			uni.showToast({
				title: '请再次输入密码',
				icon: 'none',
			});
			return;
		}

		// 验证两次输入的密码是否一致
		if (registerForm.password !== registerForm.confirmPassword) {
			uni.showToast({
				title: '两次输入的密码不一致',
				icon: 'none',
			});
			return;
		}

		// 验证手机号是否为空
		if (!registerForm.mobile) {
			uni.showToast({
				title: '手机号不能为空',
				icon: 'none',
			});
			return;
		}

		// 校验手机号格式
		if (registerForm.mobile && !/^1[3-9]\d{9}$/.test(registerForm.mobile)) {
			uni.showToast({
				title: '手机号格式不正确',
				icon: 'none'
			});
			return;
		}
		
		// 验证邮箱是否为空
		if (!registerForm.email) {
			uni.showToast({
				title: '邮箱不能为空',
				icon: 'none',
			});
			return;
		}

		// 校验邮箱格式
		if (registerForm.email && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(registerForm.email)) {
			uni.showToast({
				title: '邮箱格式不正确',
				icon: 'none'
			});
			return;
		}
		// 调用注册接口
		uni.request({
			url: 'http://localhost:58080/admin-api/system/auth/register', // 注册接口地址
			method: 'POST',
			data: {
				nickname: registerForm.nickname,
				username: registerForm.username,
				password: registerForm.password,
				mobile: registerForm.mobile,
				email: registerForm.email,
				sex : registerForm.sex,
			},
			header: {
				'Content-Type': 'application/json', // 设置请求头
			},
			success: (res) => {
				console.log(res)
				if (res.data.code === 0) {
					// 注册成功
					uni.showToast({
						title: '激活邮件已发送，请即时激活',
						icon: 'success'
					});
					
					// 延迟跳转到登录界面
					setTimeout(() => {
						uni.navigateTo({
							url: '/pages/login/login',
						});
					}, 500);
				} else {
					// 注册失败
					uni.showToast({
						title: res.data.msg || '注册失败',
						icon: 'none'
					});
				}
			},
			fail: (err) => {
				// 请求失败
				uni.showToast({
					title: '网络请求失败',
					icon: 'none'
				});
				console.error(err);
			}
		});
	};
	// 跳转到登录界面
	const goToLogin = () => {
		uni.navigateTo({
			url: '/pages/login/login',
		});
	};
</script>

<style scoped>
	.container {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100vh;
		background-color: #f5f5f5;
	}

	.register-form {
		width: 80%;
		background-color: #fff;
		padding: 30px;
		border-radius: 10px;
		box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
	}

	.form-item {
		margin-bottom: 20px;
	}

	.label {
		display: block;
		margin-bottom: 8px;
		font-size: 16px;
		color: #333;
	}

	.input {
		width: 100%;
		height: 40px;
		border: 1px solid #ddd;
		border-radius: 5px;
		padding: 0 10px;
		font-size: 14px;
	}

	.register-btn {
		width: 100%;
		height: 40px;
		background-color: #1aad19;
		color: white;
		border: none;
		border-radius: 5px;
		font-size: 16px;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-bottom: 20px;
	}

	.login-link {
		display: flex;
		justify-content: center;
	}

	.link-text {
		color: #1aad19;
		font-size: 14px;
		text-decoration: none;
	}
</style>